<template>
  <div class="container" v-loading="status_loading">
    <el-row>
      <el-col :span="24" align="right">
        <div class="grid-content bg-purple form-height">
          <el-button type="primary" @click="increase" v-if="hasPermission('add')">{{$t('m.add')+$t('m.page.partition')}}</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
         <el-table
            ref="table"
            stripe
            empty-text
            fits
            class="table-wrap"
            :data="tableData"
            :row-style="tableRowStyle"
            :row-class-name="tableRowClassName"
            @row-click="rowClick"
            @selection-change="handleMultiSelectionChange">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column
            align="center"
            prop="warehousename"
            :label="$t('m.page.warehouse')+$t('m.name')"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="partitionnumber"
            :label="$t('m.partition.partitionnumber')"
          >
            <template slot-scope="scope">
              <router-link
                :to="{ name: 'partitionList', query: { warehouseid: scope.row.warehouseid,warehousename:scope.row.warehousename}}"
              >
                <el-button style="padding:0" type="text" size="mini">{{scope.row.partitionnumber}}</el-button>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.creator')"></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
          <el-table-column align="center" prop="editor" :label="$t('m.modifier')"></el-table-column>
          <el-table-column align="center" prop="modifydate" :label="$t('m.modifydate')"></el-table-column>
        </el-table>

        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChangeInitFn"
          @size-change="handleSizeChangeInitFn">
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 库区新增 dialog 开始 -->
    <handlePartitionPopup
      v-if="handlePartitionPopupVisible"
      :popupVisible="handlePartitionPopupVisible"
      :typevalueOptions="typevalue"
      @callback="init"
      @close="handlePartitionPopupVisible=false">
    </handlePartitionPopup>
    <!-- 库区新增 dialog 结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'

export default {
  name:'partition',
  data(){
    return {
      stateValue:'',
      status_loading:false,
      tableData:[],
      typevalue:[],

      handlePartitionPopupVisible:false // 控制新增库区dialog显示隐藏
    }
  },
  components:{
    handlePartitionPopup:() => import('@/components/partition/handle-partition-popup')
  },
  methods:{
    search(){
      this.page = 1
      this.init()
    },
    handleClick(row){
      const $table = this.$refs.table
      $table.toggleRowExpansion(row)
      $table.toggleRowSelection(row)
    },
    init(){
      let that = this
      that.status_loading = true
      that
        .$axios({
          method:'get',
          url:'/warehouse/page',
          params:{
            page:this.page,
            rows:this.rowSize
          }
        })
        .then(({data})=> {
          for (let i = 0; i < data.records.length; i++){
            data.records[
              i
            ].createdate = common.timestampToTime(
              data.records[i].createdate
            )
            data.records[
              i
            ].modifydate = common.timestampToTime(
              data.records[i].modifydate
            )
          }
          that.tableData = data.records
          that.totalRows = data.total
          that.page = data.current
          that.status_loading = false
        })
    },
    increase(){
      this.handlePartitionPopupVisible = true
    },
    // 获取库区类型
    getTypevalue(){
      this.$axios({
        method:'get',
        url:'/typevalue/list?name=库区类型'
      }).then(({data})=> {
        this.typevalue = data
      })
    },
    closeDialog(){
      this.$refs['ruleFormAdd'].resetFields()
    }
  },
  activated(){
    this.init()
    this.getTypevalue()
  },
  beforeRouteLeave(to, form, next){
    this.handlePartitionPopupVisible=false
    next()
  }
}
</script>
<style  lang="scss" scoped>
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
</style>
